<template>
	<view v-if="showInfo" class="eject" @click.stop="shows()" @touchmove.stop="">
		<view class="centerWar">
			<view class="titleWar borderB1">
				<view class="left"></view>
				<view class="center">检测依据</view>
				<view @click.stop="shows()" class="right iconfont">&#xe645;</view>
			</view>
			<view v-if="showNum === 1" class="tabWar">
				<view class="row tabTitle">
					<view class="item">检测项目</view>
					<view class="item">检测依据</view>
				</view>
				<view class="row">
					<view class="item">pH</view>
					<view class="item">土壤检测第2部分土壤pH的测定 NV/T1121.2-2006</view>
				</view>
				<view class="row">
					<view class="item">电导率</view>
					<view class="item">土壤电导率的测定HJ802-2016</view>
				</view>
				<view class="row">
					<view class="item">有机质</view>
					<view class="item">土壤检测第6部分土壤有机质的 测定NY/T 1121.6-2006</view>
				</view>
				<view class="row">
					<view class="item">水解性氮</view>
					<view class="item">土壤检测第24部分土壤全氮的 测定-自动定氮仪法 NY/T1228-2015</view>
				</view>
				<view class="row">
					<view class="item">有效磷</view>
					<view class="item">土壤有效磷的测定碳酸氢钠浸 提-钼锑抗分光光度法 HJ704-2014</view>
				</view>
				<view class="row">
					<view class="item">速效钾</view>
					<view class="item">土壤速效钾和缓效钾含量的 测定NY/T889-2004</view>
				</view>
			</view>
			<view v-if="showNum === 2" class="tabWar">
				<view class="row tabTitle">
					<view class="item">检测项目</view>
					<view class="item">检测依据</view>
				</view>
				<view class="row">
					<view class="item">pH</view>
					<view class="item">水质pH的测定GB/T 6920-86</view>
				</view>
				<view class="row">
					<view class="item">电导率</view>
					<view class="item">《水和废水监测分析方法》（第四版增补版）</view>
				</view>
				<view class="row">
					<view class="item">钙镁总量</view>
					<view class="item">水质钙和镁总量的测定EDTA GB7477-87</view>
				</view>
				<view class="row">
					<view class="item">氯化物</view>
					<view class="item">水质氯化物测定 硝酸银滴定法 GB 11896-89</view>
				</view>
				<view class="row">
					<view class="item">碱度</view>
					<view class="item">《水和废水监测分析方法》（第四版增补版）</view>
				</view>
				<view class="row">
					<view class="item">硫酸盐</view>
					<view class="item">水质硫酸盐的测定 重量法GB11899-1989</view>
				</view>
				<view class="row">
					<view class="item">矿化度</view>
					<view class="item">《水和废水监测分析方法》（第四版增补版）第三篇 第一章 八 重量法</view>
				</view>
				<view class="row">
					<view class="item">水温℃</view>
					<view class="item">《水质 水温的测定温度计或颠倒温度计测定法》GB/T 13195-91</view>
				</view>
				<view class="row">
					<view class="item">浊度（度）</view>
					<view class="item">《水质浊度的测定》GB/T 13200-91</view>
				</view>
				<view class="row">
					<view class="item">溶解氧</view>
					<view class="item">《水质溶解氧的测定碘量法》GB 7489-87</view>
				</view>
				<view class="row">
					<view class="item">化学需氧量</view>
					<view class="item">《水质 化学需氧量的测定重铬酸盐法》HJ 828-2017</view>
				</view>
				<view class="row">
					<view class="item">氨氮</view>
					<view class="item">《水质 氨氮的测定 纳氏试剂分光光度法》HJ 535-2009</view>
				</view>
				<view class="row">
					<view class="item">全盐量</view>
					<view class="item">《水质全盐量的测定重量法》HJ/T 51-1999</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'eject',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		showNum: {
			type: Number,
			default: 1
		}
	},
	methods: {
		shows() {
			this.showInfo = !this.showInfo;
		}
	},
	data() {
		return {
			showInfo: false
		};
	},
	watch: {
		show: function(value) {
			this.showInfo = value;
		},
		showInfo: function(value) {
			this.$nextTick(function() {
				this.$emit('update:show', value);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/css/asd.scss';
.eject {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	padding: 30rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: center;
	align-items: center;
	justify-content: center;
	.centerWar {
		width: 100%;
		max-height: 80vh;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		border-radius: 36rpx;
		overflow: hidden;
		.titleWar {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			min-height: 112rpx;
			padding: 0 33rpx;
			.center {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 44rpx;
			}
			.right {
				font-size: 28rpx;
				color: #bfbfbf;
			}
		}
		.tabWar {
			@include ejectList(2, #ebf2f5);
			max-height: 100%;
			overflow: scroll;
			.row {
				background-color: #f9fafa;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 44rpx;
				&.tabTitle {
					font-size: 26rpx;
					color: #333333;
					line-height: 44rpx;
				}
				.item:nth-child(2) {
					line-height: 38rpx;
					padding: 28rpx 53rpx 28rpx 0;
					box-sizing: border-box;
				}
			}
		}
	}
}
</style>
